1 files changed, 792 insertions, 0 deletions
diff --git a/app/[lng]/evcp/(evcp)/avl/components/avl-registration-area.tsx b/app/[lng]/evcp/(evcp)/avl/components/avl-registration-area.tsx
new file mode 100644
index 00000000..69b1d417
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/avl/components/avl-registration-area.tsx
@@ -0,0 +1,792 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Card } from "@/components/ui/card"
+import { Checkbox } from "@/components/ui/checkbox"
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from "lucide-react"
+import {
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+} from "@tanstack/react-table"
+import { DataTable } from "@/components/data-table/data-table"
+
+// 프로젝트 AVL 데이터 타입
+type ProjectAvlItem = {
+  id: string
+  no: number
+  designCategory: string
+  customerAvlMaterialName: string
+  materialGroupInfo: string
+  avlVendorName: string
+  vendorInfo: string
+  ownerSuggestion: string
+  shiSuggestion: string
+}
+
+// 선종별 표준 AVL 데이터 타입
+type StandardAvlItem = {
+  id: string
+  no: number
+  designCategory: string
+  avlVendorName: string
+  materialGroupInfo: string
+  vendorInfo: string
+  headquarterLocation: string
+  tier: string
+}
+
+// Vendor Pool 데이터 타입
+type VendorPoolItem = {
+  id: string
+  no: number
+  designCategory: string
+  avlVendorName: string
+  materialGroupInfo: string
+  vendorInfo: string
+  vendorClassification: string
+  faStatus: string
+  recentQuoteNumber: string
+  recentOrderNumber: string
+}
+
+// Mock 데이터들
+const mockProjectAvlData: ProjectAvlItem[] = [
+  {
+    id: "p1",
+    no: 1,
+    designCategory: "엔진",
+    customerAvlMaterialName: "메인엔진",
+    materialGroupInfo: "엔진부품",
+    avlVendorName: "엔진업체A",
+    vendorInfo: "국내 엔진 전문업체",
+    ownerSuggestion: "승인",
+    shiSuggestion: "승인",
+  },
+]
+
+const mockStandardAvlData: StandardAvlItem[] = [
+  {
+    id: "s1",
+    no: 1,
+    designCategory: "케이블",
+    avlVendorName: "케이블업체A",
+    materialGroupInfo: "전기부품",
+    vendorInfo: "국내 케이블 제조사",
+    headquarterLocation: "한국",
+    tier: "Tier 1",
+  },
+]
+
+const mockVendorPoolData: VendorPoolItem[] = [
+  {
+    id: "v1",
+    no: 1,
+    designCategory: "펌프",
+    avlVendorName: "펌프업체A",
+    materialGroupInfo: "기계부품",
+    vendorInfo: "국제 펌프 제조사",
+    vendorClassification: "주요업체",
+    faStatus: "완료",
+    recentQuoteNumber: "Q2024001",
+    recentOrderNumber: "PO2024001",
+  },
+]
+
+// 프로젝트 AVL 테이블 컬럼
+const projectAvlColumns: ColumnDef<ProjectAvlItem>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row, table }) => {
+      // 프로젝트 AVL 테이블의 단일 선택 핸들러
+      const handleRowSelection = (checked: boolean) => {
+        if (checked) {
+          // 다른 모든 행의 선택 해제
+          table.getRowModel().rows.forEach(r => {
+            if (r !== row && r.getIsSelected()) {
+              r.toggleSelected(false)
+            }
+          })
+        }
+        // 현재 행 선택/해제
+        row.toggleSelected(checked)
+      }
+
+      return (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={handleRowSelection}
+          aria-label="Select row"
+        />
+      )
+    },
+    enableSorting: false,
+    enableHiding: false,
+    size: 50,
+  },
+  {
+    accessorKey: "no",
+    header: "No.",
+    size: 60,
+  },
+  {
+    accessorKey: "designCategory",
+    header: "설계공종",
+    size: 120,
+  },
+  {
+    accessorKey: "customerAvlMaterialName",
+    header: "고객사 AVL 자재명",
+    size: 150,
+  },
+  {
+    accessorKey: "materialGroupInfo",
+    header: "자재그룹 정보",
+    size: 130,
+  },
+  {
+    accessorKey: "avlVendorName",
+    header: "AVL 등재업체명",
+    size: 140,
+  },
+  {
+    accessorKey: "vendorInfo",
+    header: "협력업체 정보",
+    size: 130,
+  },
+  {
+    accessorKey: "ownerSuggestion",
+    header: "선주제안",
+    size: 100,
+  },
+  {
+    accessorKey: "shiSuggestion",
+    header: "SHI 제안",
+    size: 100,
+  },
+]
+
+// 선종별 표준 AVL 테이블 컬럼
+const standardAvlColumns: ColumnDef<StandardAvlItem>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row, table }) => {
+      // 선종별 표준 AVL 테이블의 단일 선택 핸들러
+      const handleRowSelection = (checked: boolean) => {
+        if (checked) {
+          // 다른 모든 행의 선택 해제
+          table.getRowModel().rows.forEach(r => {
+            if (r !== row && r.getIsSelected()) {
+              r.toggleSelected(false)
+            }
+          })
+        }
+        // 현재 행 선택/해제
+        row.toggleSelected(checked)
+      }
+
+      return (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={handleRowSelection}
+          aria-label="Select row"
+        />
+      )
+    },
+    enableSorting: false,
+    enableHiding: false,
+    size: 50,
+  },
+  {
+    accessorKey: "no",
+    header: "No.",
+    size: 60,
+  },
+  {
+    accessorKey: "designCategory",
+    header: "설계공종",
+    size: 120,
+  },
+  {
+    accessorKey: "avlVendorName",
+    header: "AVL 등재업체명",
+    size: 140,
+  },
+  {
+    accessorKey: "materialGroupInfo",
+    header: "자재그룹 정보",
+    size: 130,
+  },
+  {
+    accessorKey: "vendorInfo",
+    header: "협력업체 정보",
+    size: 130,
+  },
+  {
+    accessorKey: "headquarterLocation",
+    header: "본사 위치 (국가)",
+    size: 140,
+  },
+  {
+    accessorKey: "tier",
+    header: "등급 (Tier)",
+    size: 120,
+  },
+]
+
+// Vendor Pool 테이블 컬럼
+const vendorPoolColumns: ColumnDef<VendorPoolItem>[] = [
+  {
+    id: "select",
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && "indeterminate")
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label="Select all"
+      />
+    ),
+    cell: ({ row, table }) => {
+      // Vendor Pool 테이블의 단일 선택 핸들러
+      const handleRowSelection = (checked: boolean) => {
+        if (checked) {
+          // 다른 모든 행의 선택 해제
+          table.getRowModel().rows.forEach(r => {
+            if (r !== row && r.getIsSelected()) {
+              r.toggleSelected(false)
+            }
+          })
+        }
+        // 현재 행 선택/해제
+        row.toggleSelected(checked)
+      }
+
+      return (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={handleRowSelection}
+          aria-label="Select row"
+        />
+      )
+    },
+    enableSorting: false,
+    enableHiding: false,
+    size: 50,
+  },
+  {
+    accessorKey: "no",
+    header: "No.",
+    size: 60,
+  },
+  {
+    accessorKey: "designCategory",
+    header: "설계공종",
+    size: 120,
+  },
+  {
+    accessorKey: "avlVendorName",
+    header: "AVL 등재업체명",
+    size: 140,
+  },
+  {
+    accessorKey: "materialGroupInfo",
+    header: "자재그룹 정보",
+    size: 130,
+  },
+  {
+    accessorKey: "vendorInfo",
+    header: "협력업체 정보",
+    size: 130,
+  },
+  {
+    accessorKey: "vendorClassification",
+    header: "업체분류",
+    size: 100,
+  },
+  {
+    accessorKey: "faStatus",
+    header: "FA현황",
+    size: 100,
+  },
+  {
+    accessorKey: "recentQuoteNumber",
+    header: "최근견적번호",
+    size: 130,
+  },
+  {
+    accessorKey: "recentOrderNumber",
+    header: "최근발주번호",
+    size: 130,
+  },
+]
+
+// 프로젝트 AVL 테이블 컴포넌트
+function ProjectAvlTable({
+  onSelectionChange,
+  resetCounter
+}: {
+  onSelectionChange?: (count: number) => void
+  resetCounter?: number
+}) {
+  const [data] = React.useState(() => [...mockProjectAvlData])
+
+  const table = useReactTable({
+    data,
+    columns: projectAvlColumns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 10,
+      },
+    },
+  })
+
+  // 선택 상태 변경 시 콜백 호출
+  React.useEffect(() => {
+    const selectedRows = table.getFilteredSelectedRowModel().rows
+    onSelectionChange?.(selectedRows.length)
+  }, [table.getFilteredSelectedRowModel().rows.length, onSelectionChange])
+
+  // 선택 해제 요청이 오면 모든 선택 해제
+  React.useEffect(() => {
+    if (resetCounter && resetCounter > 0) {
+      table.toggleAllPageRowsSelected(false)
+    }
+  }, [resetCounter, table])
+
+  return (
+    <div className="flex flex-col">
+      <div className="mb-2">
+        <div className="flex items-center justify-between mb-2">
+          <h4 className="font-medium">프로젝트 AVL</h4>
+          <div className="flex gap-1">
+            <Button variant="outline" size="sm">
+              행 추가
+            </Button>
+            <Button variant="outline" size="sm">
+              파일 업로드
+            </Button>
+            <Button variant="outline" size="sm">
+              자동 매핑
+            </Button>
+            <Button variant="outline" size="sm">
+              강제 매핑
+            </Button>
+            <Button variant="outline" size="sm">
+              항목 삭제
+            </Button>
+          </div>
+        </div>
+      </div>
+      <DataTable table={table} />
+    </div>
+  )
+}
+
+// 선종별 표준 AVL 테이블 컴포넌트
+function StandardAvlTable({
+  onSelectionChange,
+  resetCounter
+}: {
+  onSelectionChange?: (count: number) => void
+  resetCounter?: number
+}) {
+  const [data] = React.useState(() => [...mockStandardAvlData])
+
+  const table = useReactTable({
+    data,
+    columns: standardAvlColumns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 10,
+      },
+    },
+  })
+
+  // 선택 상태 변경 시 콜백 호출
+  React.useEffect(() => {
+    onSelectionChange?.(table.getFilteredSelectedRowModel().rows.length)
+  }, [table.getFilteredSelectedRowModel().rows.length, onSelectionChange])
+
+  // 선택 해제 요청이 오면 모든 선택 해제
+  React.useEffect(() => {
+    if (resetCounter && resetCounter > 0) {
+      table.toggleAllPageRowsSelected(false)
+    }
+  }, [resetCounter, table])
+
+  return (
+    <div className="flex flex-col">
+      <div className="mb-2">
+        <div className="flex items-center justify-between mb-2">
+          <h4 className="font-medium">선종별 표준 AVL</h4>
+          <div className="flex gap-1">
+            <Button variant="outline" size="sm">
+              신규업체 추가
+            </Button>
+            <Button variant="outline" size="sm">
+              파일 업로드
+            </Button>
+            <Button variant="outline" size="sm">
+              일괄입력
+            </Button>
+            <Button variant="outline" size="sm">
+              항목삭제
+            </Button>
+          </div>
+        </div>
+      </div>
+      <DataTable table={table} />
+    </div>
+  )
+}
+
+// Vendor Pool 테이블 컴포넌트
+function VendorPoolTable({
+  onSelectionChange,
+  resetCounter
+}: {
+  onSelectionChange?: (count: number) => void
+  resetCounter?: number
+}) {
+  const [data] = React.useState(() => [...mockVendorPoolData])
+
+  const table = useReactTable({
+    data,
+    columns: vendorPoolColumns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    initialState: {
+      pagination: {
+        pageSize: 10,
+      },
+    },
+  })
+
+  // 선택 상태 변경 시 콜백 호출
+  React.useEffect(() => {
+    onSelectionChange?.(table.getFilteredSelectedRowModel().rows.length)
+  }, [table.getFilteredSelectedRowModel().rows.length, onSelectionChange])
+
+  // 선택 해제 요청이 오면 모든 선택 해제
+  React.useEffect(() => {
+    if (resetCounter && resetCounter > 0) {
+      table.toggleAllPageRowsSelected(false)
+    }
+  }, [resetCounter, table])
+
+  return (
+    <div className="flex flex-col">
+      <div className="mb-2">
+        <div className="flex items-center justify-between mb-2">
+          <h4 className="font-medium">Vendor Pool</h4>
+          <div className="flex gap-1">
+            <Button variant="outline" size="sm">
+              신규업체 추가
+            </Button>
+          </div>
+        </div>
+      </div>
+      <DataTable table={table} />
+    </div>
+  )
+}
+
+// 선택된 테이블 타입
+type SelectedTable = 'project' | 'standard' | 'vendor' | null
+
+// 선택 상태 액션 타입
+type SelectionAction =
+  | { type: 'SELECT_PROJECT'; count: number }
+  | { type: 'SELECT_STANDARD'; count: number }
+  | { type: 'SELECT_VENDOR'; count: number }
+  | { type: 'CLEAR_SELECTION' }
+
+// 선택 상태
+interface SelectionState {
+  selectedTable: SelectedTable
+  selectedRowCount: number
+  resetCounters: {
+    project: number
+    standard: number
+    vendor: number
+  }
+}
+
+// 선택 상태 리듀서
+const selectionReducer = (state: SelectionState, action: SelectionAction): SelectionState => {
+  switch (action.type) {
+    case 'SELECT_PROJECT':
+      if (action.count > 0) {
+        return {
+          selectedTable: 'project',
+          selectedRowCount: action.count,
+          resetCounters: {
+            ...state.resetCounters,
+            standard: state.selectedTable !== 'project' ? state.resetCounters.standard + 1 : state.resetCounters.standard,
+            vendor: state.selectedTable !== 'project' ? state.resetCounters.vendor + 1 : state.resetCounters.vendor,
+          }
+        }
+      } else if (state.selectedTable === 'project') {
+        return {
+          ...state,
+          selectedTable: null,
+          selectedRowCount: 0,
+        }
+      }
+      return state
+
+    case 'SELECT_STANDARD':
+      if (action.count > 0) {
+        return {
+          selectedTable: 'standard',
+          selectedRowCount: action.count,
+          resetCounters: {
+            ...state.resetCounters,
+            project: state.selectedTable !== 'standard' ? state.resetCounters.project + 1 : state.resetCounters.project,
+            vendor: state.selectedTable !== 'standard' ? state.resetCounters.vendor + 1 : state.resetCounters.vendor,
+          }
+        }
+      } else if (state.selectedTable === 'standard') {
+        return {
+          ...state,
+          selectedTable: null,
+          selectedRowCount: 0,
+        }
+      }
+      return state
+
+    case 'SELECT_VENDOR':
+      if (action.count > 0) {
+        return {
+          selectedTable: 'vendor',
+          selectedRowCount: action.count,
+          resetCounters: {
+            ...state.resetCounters,
+            project: state.selectedTable !== 'vendor' ? state.resetCounters.project + 1 : state.resetCounters.project,
+            standard: state.selectedTable !== 'vendor' ? state.resetCounters.standard + 1 : state.resetCounters.standard,
+          }
+        }
+      } else if (state.selectedTable === 'vendor') {
+        return {
+          ...state,
+          selectedTable: null,
+          selectedRowCount: 0,
+        }
+      }
+      return state
+
+    default:
+      return state
+  }
+}
+
+// AVL 등록 영역 컴포넌트
+export function AvlRegistrationArea() {
+  // 단일 선택 상태 관리 (useReducer 사용)
+  const [selectionState, dispatch] = React.useReducer(selectionReducer, {
+    selectedTable: null,
+    selectedRowCount: 0,
+    resetCounters: {
+      project: 0,
+      standard: 0,
+      vendor: 0,
+    },
+  })
+
+  // 선택 핸들러들
+  const handleProjectSelection = React.useCallback((count: number) => {
+    dispatch({ type: 'SELECT_PROJECT', count })
+  }, [])
+
+  const handleStandardSelection = React.useCallback((count: number) => {
+    dispatch({ type: 'SELECT_STANDARD', count })
+  }, [])
+
+  const handleVendorSelection = React.useCallback((count: number) => {
+    dispatch({ type: 'SELECT_VENDOR', count })
+  }, [])
+
+  const { selectedTable, selectedRowCount, resetCounters } = selectionState
+
+  return (
+    <Card className="h-full min-w-full overflow-visible">
+      {/* 고정 헤더 영역 */}
+      <div className="sticky top-0 z-10 p-4 border-b">
+        <div className="flex items-center justify-between">
+          <h3 className="text-lg font-semibold">AVL 등록</h3>
+          <div className="flex gap-2">
+            <Button variant="outline" size="sm">
+              저장
+            </Button>
+            <Button variant="outline" size="sm">
+              최종 확정
+            </Button>
+            <Button variant="outline" size="sm">
+              AVL 불러오기
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* 스크롤되는 콘텐츠 영역 */}
+      <div className="overflow-x-auto overflow-y-hidden">
+        <div className="grid grid-cols-[2.2fr_2fr_2.5fr] gap-0 min-w-[1200px] w-fit">
+          {/* 프로젝트 AVL 테이블 - 9개 컬럼 */}
+          <div className="p-4 border-r relative">
+            <ProjectAvlTable
+              onSelectionChange={handleProjectSelection}
+              resetCounter={resetCounters.project}
+            />
+
+            {/* 이동 버튼들 - 첫 번째 border 위에 오버레이 */}
+            <div className="absolute right-0 top-1/2 transform -translate-y-1/2 translate-x-1/2 z-10">
+              <div className="flex flex-col gap-2 bg-background border rounded-md p-1 shadow-sm">
+
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-8 h-8 p-0"
+                  title="왼쪽으로 이동"
+                  disabled={selectedTable !== 'standard' || selectedRowCount === 0}
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </Button>
+
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-8 h-8 p-0"
+                  title="오른쪽으로 이동"
+                  disabled={selectedTable !== 'project' || selectedRowCount === 0}
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </Button>
+
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-8 h-8 p-0"
+                  title="오른쪽으로 이동"
+                  disabled={selectedTable !== 'project' || selectedRowCount === 0}
+                >
+                  <ChevronsRight className="w-4 h-4" />
+                </Button>
+
+              </div>
+            </div>
+          </div>
+
+          {/* 선종별 표준 AVL 테이블 - 8개 컬럼 */}
+          <div className="p-4 border-r relative">
+            <StandardAvlTable
+              onSelectionChange={handleStandardSelection}
+              resetCounter={resetCounters.standard}
+            />
+
+            {/* 이동 버튼들 - 두 번째 border 위에 오버레이 */}
+            <div className="absolute right-0 top-1/2 transform -translate-y-1/2 translate-x-1/2 z-10">
+              <div className="flex flex-col gap-2 bg-background border rounded-md p-1 shadow-sm">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-8 h-8 p-0"
+                  title="왼쪽으로 이동"
+                  disabled={selectedTable !== 'standard' || selectedRowCount === 0}
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-8 h-8 p-0"
+                  title="오른쪽으로 이동"
+                  disabled={selectedTable !== 'standard' || selectedRowCount === 0}
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </Button>
+
+              </div>
+            </div>
+          </div>
+
+          {/* Vendor Pool 테이블 - 10개 컬럼 */}
+          <div className="p-4 relative">
+            <VendorPoolTable
+              onSelectionChange={handleVendorSelection}
+              resetCounter={resetCounters.vendor}
+            />
+
+            {/* 이동 버튼들 - 세 번째 테이블의 왼쪽 border 위에 오버레이 */}
+            <div className="absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-1/2 z-10">
+              <div className="flex flex-col gap-2 bg-background border rounded-md p-1 shadow-sm">
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-8 h-8 p-0"
+                  title="왼쪽으로 이동"
+                  disabled={selectedTable !== 'vendor' || selectedRowCount === 0}
+                >
+                  <ChevronsLeft className="w-4 h-4" />
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-8 h-8 p-0"
+                  title="왼쪽으로 이동"
+                  disabled={selectedTable !== 'vendor' || selectedRowCount === 0}
+                >
+                  <ChevronLeft className="w-4 h-4" />
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="w-8 h-8 p-0"
+                  title="오른쪽으로 이동"
+                  disabled={selectedTable !== 'standard' || selectedRowCount === 0}
+                >
+                  <ChevronRight className="w-4 h-4" />
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Card>
+  )
+}